﻿
/*
 *
 * BOOTSTRAP
 *	
 */


html
{
	background-image: url("http://images.colourbox.com/thumb_COLOURBOX4269318.jpg");
	background-repeat: repeat;
}

body
{
	background: none;
}

html, body
{
	height: 100%;
}

#main:before {
	content: " ";
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: -1;
	top: 0;
	left: 0;
	background: -moz-linear-gradient(left,  rgba(56,55,55,1) 0%, rgba(67,52,72,0.97) 10%, rgba(110,39,142,0.97) 50%, rgba(67,52,72,0.97) 90%, rgba(56,55,55,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(56,55,55,1)), color-stop(10%,rgba(67,52,72,0.97)), color-stop(50%,rgba(110,39,142,0.97)), color-stop(90%,rgba(67,52,72,0.97)), color-stop(100%,rgba(56,55,55,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(left,  rgba(56,55,55,1) 0%,rgba(67,52,72,0.97) 10%,rgba(110,39,142,0.97) 50%,rgba(67,52,72,0.97) 90%,rgba(56,55,55,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(left,  rgba(56,55,55,1) 0%,rgba(67,52,72,0.97) 10%,rgba(110,39,142,0.97) 50%,rgba(67,52,72,0.97) 90%,rgba(56,55,55,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(left,  rgba(56,55,55,1) 0%,rgba(67,52,72,0.97) 10%,rgba(110,39,142,0.97) 50%,rgba(67,52,72,0.97) 90%,rgba(56,55,55,1) 100%); /* IE10+ */
	background: linear-gradient(to right,  rgba(56,55,55,1) 0%,rgba(67,52,72,0.97) 10%,rgba(110,39,142,0.97) 50%,rgba(67,52,72,0.97) 90%,rgba(56,55,55,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#383737', endColorstr='#383737',GradientType=1 ); /* IE6-9 */
}

/* i searched forever for a solution to this and finally found this
 * http://stackoverflow.com/questions/10099422/flushing-footer-to-bottom-of-the-page-twitter-bootstrap
 * only had to modify it a bit
 */

#main
{
	min-height: 100%;
	margin-bottom: -84px;
}

#main > div
{
	overflow: auto;
	padding-bottom: 84px;
}

.footer
{
	position: relative;
	height: 84px;
}

.background-white
{
	background-color: white;
}

.padding-lr
{
	padding-left: 32px;
	padding-right: 32px;
}

.padding-tb
{
	padding-top: 32px;
	padding-bottom: 32px;
}

.margin-lr
{
	margin-left: 32px;
	margin-right: 32px;
}

.margin-tb
{
	margin-top: 32px;
	margin-bottom: 32px;
}

.padding-0
{
	padding: 0;
}

.margin-0
{
	margin: 0;
}

h2
{
	padding-left: 32px;
}

.cursor-pointer
{
	cursor: pointer;
}




/* THUMBNAILS */

ul.thumbnails li.span4:nth-child(3n + 4)
{
	margin-left : 0px;
}

ul.thumbnails li.span3:nth-child(4n + 5) 
{
	margin-left : 0px;
}

ul.thumbnails li.span12 + li
{
	margin-left : 0px;
}

ul.thumbnails li
{
	text-align: center;
}









/* BANNER */

#overview
{
	background-image: url('../Images/red_dices_psd_s.jpg');
	background-position: right;
	padding: 32px;
	margin: 0;
	color: black;
	background-color: white;
	background-repeat: no-repeat;
	height: 64px;
}

#overview h1
{
	display: inline;
}

h1 > a
{
	color: black;
}

h1 > a:hover
{
	color: black;
	text-decoration: none;
}







/* CHAT */

#chat
{
	height: 100%;
}

#chat-wrapper
{
	margin: 0;
	height: 442px;
}

.chatusername
{
	font-weight: bold;
}

#list-messages
{
	height: 256px;
	overflow-y: scroll;
	list-style-type: none;
	overflow-wrap: break-word;
	margin: 0;
}

#chat-box > .alert
{
	margin: 0;
	padding: 0;
}




/* GAME DESCRIPTION */

#game-description-buttons > *
{
	/* probably used later */
}

#user-bait > a
{
	width: 100%;
}

#user-bait > a ~ a
{
	margin-left: 0;
	text-align: center;
}


/* GAMELOBBY */


.invited-players-wrapper
{
}

#player-list
{
	overflow-wrap: break-word;
	overflow-y: scroll;
	height: 248px;
}

.lobby-buttons
{
	margin: 0;
	width: 100%;
}

















/* Tic Tac Toe */

table#tic-tac-toe 
{
	background: #fafafa;
	border: 1px dotted grey;
	margin: auto;
}

table#tic-tac-toe td 
{
	height: 96px;
	width: 96px;
	border: 1px solid lightblue;
	text-align: center;
	font-family: Delicious;
	font-size: 48px;
	color: red;
}

table#tic-tac-toe td:hover
{ 
	background-color: #e6e6e6;
}









/* GAME CSS */




.card {
  height: 20%;
  width: 11%;
  background-color: #fff;
  border: 1px solid #695d39;
  border-radius: .5em;                       /* omitted -moz- and -webkit- hacks */
  box-shadow: -.25em .25em .5em -.25em #000; /* omitted -moz- and -webkit- hacks */
  font-family: 'Times', serif;
  line-height: 1em;
  padding-top: .25em;
  padding-left: .1em;
  letter-spacing: -.2em;
  position: absolute;
  background-image: url("../Images/playingcards.png");
  background-color: #fff;
  background-size: 1450% 600%;

}
.spanDisplay
{
	min-height: 0 !important;
}
.cardback
{
	height: 20%;
	width: 11%;
	background: #fff url('../Images/cardback.jpg'); 
	background-size: 100% 100%;
}

.Heart      
{ 
        background-position-y: 46.7%; 
        color: #890000;

}
.Spade
{
        background-position-y: 25%;
        color: black;
}
.Diamond
{
        background-position-y: 69.3%;
        color: #890000;
}
.Club
{
        background-position-y: 2.6%;
        color: black;
}
.rank_K { background-position-x: 96.5%;}
.rank_Q { background-position-x: 88.8%;}
.rank_J { background-position-x: 81.1%;}
.rank_T { background-position-x: 73.4%;}
.rank_9 {background-position-x: 65.7%;}
.rank_8 {background-position-x: 58%;}
.rank_7 {background-position-x: 50.3%;}
.rank_6 {background-position-x: 42.6%;}
.rank_5 {background-position-x: 34.9%;}
.rank_4 {background-position-x: 27.2%;}
.rank_3 {background-position-x: 19.5%;}
.rank_2 {background-position-x: 11.8%;}
.rank_1 {background-position-x: 4.1%;}
.rank_A {background-position-x: 4.1%;}


#felt 
{ 
		border: 1px solid #ccc;
		position: relative;
		background: green;
		height: 450px;
		width: 100%;
}
 
#felt div 
{ 
        position: absolute;
        top: 40%;
		left: 45%; 

		-webkit-transition: all 0.01s ease-in-out; 
        -moz-transition: all 0.01s ease-in-out; 
        -o-transition: all 0.01s ease-in-out; 
        -ms-transition: all 0.01s ease-in-out; 
}



 /*!
 * Bootstrap v2.3.1-j6
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat, extended by @ArnoldDaniels.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.btn-file {
  overflow: hidden;
  position: relative;
  vertical-align: middle;
}
.btn-file > input {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  transform: translate(-300px, 0) scale(4);
  font-size: 23px;
  direction: ltr;
  cursor: pointer;
}
.fileupload {
  margin-bottom: 9px;
}
.fileupload .uneditable-input {
  display: inline-block;
  margin-bottom: 0px;
  vertical-align: middle;
  cursor: text;
}
.fileupload .thumbnail {
  overflow: hidden;
  display: inline-block;
  margin-bottom: 5px;
  vertical-align: middle;
  text-align: center;
}
.fileupload .thumbnail > img {
  display: inline-block;
  vertical-align: middle;
  max-height: 100%;
}
.fileupload .btn {
  vertical-align: middle;
}
.fileupload-exists .fileupload-new,
.fileupload-new .fileupload-exists {
  display: none;
}
.fileupload-inline .fileupload-controls {
  display: inline;
}
.fileupload-new .input-append .btn-file {
  -webkit-border-radius: 0 3px 3px 0;
  -moz-border-radius: 0 3px 3px 0;
  border-radius: 0 3px 3px 0;
}
.thumbnail-borderless .thumbnail {
  border: none;
  padding: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.fileupload-new.thumbnail-borderless .thumbnail {
  border: 1px solid #ddd;
}
.control-group.warning .fileupload .uneditable-input {
  color: #a47e3c;
  border-color: #a47e3c;
}
.control-group.warning .fileupload .fileupload-preview {
  color: #a47e3c;
}
.control-group.warning .fileupload .thumbnail {
  border-color: #a47e3c;
}
.control-group.error .fileupload .uneditable-input {
  color: #b94a48;
  border-color: #b94a48;
}
.control-group.error .fileupload .fileupload-preview {
  color: #b94a48;
}
.control-group.error .fileupload .thumbnail {
  border-color: #b94a48;
}
.control-group.success .fileupload .uneditable-input {
  color: #468847;
  border-color: #468847;
}
.control-group.success .fileupload .fileupload-preview {
  color: #468847;
}
.control-group.success .fileupload .thumbnail {
  border-color: #468847;
}
